<template>
  <div class="admin">
    <div class="header"></div>
    <div class="center">
      <el-tabs v-model="activeName" class="center-tabs">
        <el-tab-pane label="首页管理" name="home">
          <Home/>
        </el-tab-pane>
        <el-tab-pane label="用户管理" name="users">
          <Users/>
        </el-tab-pane>
        <el-tab-pane label="文章管理" name="articles">
          <Articles/>
        </el-tab-pane>
        <el-tab-pane label="评论管理" name="comments">
          <Comments/>
        </el-tab-pane>
        <el-tab-pane label="草稿管理" name="draft">
          <Draft/>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Home from '../../components/admin/home.vue';
import Users from '../../components/admin/users.vue';
import Articles from '../../components/admin/articles.vue'
import Comments from '../../components/admin/comments.vue'
import Draft from '../../components/admin/draft.vue'

// 当前tab活动页
const activeName = ref('home')
</script>

<style scoped>
.admin {
  min-height: 100%;
  height: max-content;
  width: 100%;
  /* background: url(https://sam-1306698532.cos.ap-nanjing.myqcloud.com/pic/bg1.png) no-repeat fixed;
  background-size: cover; */
  background-color: #fff;
}
.header {
  height: 4.5rem;
  width: 100%;
  background-color: #4dcdef;
}
.center {
  height: calc(100% - 4.5rem);
  width: 100%;
  padding: 0 5rem;
}
</style>